<template>
  <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex">
    <div style="width: 150px;margin-left: 10px; font-weight: bold;color: #8A2BE2">
      在线刷题-dev
    </div>
    <div style="flex: 1"></div>
    <div style="width: 100px; padding-top: 20px;font-size: 40px; font-weight: bold;">
      <el-dropdown>
      <span class="el-dropdown-link">
        <el-icon color="#409EFC" class="no-inherit" style="margin-right: 5px;height: 10px">
        <UserFilled />
        </el-icon>
        {{showUsername}}
      </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="personalData">个人信息</el-dropdown-item>
            <el-dropdown-item @click="exit">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>


<script>
import Cookies from "js-cookie";
import { UserFilled } from '@element-plus/icons-vue'
import axios from "axios"; // 引入 Edit 这个 svg组件


export default {
  name: "Header",
  components:{
    UserFilled,
  },
  data(){
    return{
      user:{}
    }
  },
  computed:{
    showUsername(){

    }
  },
  created() {

  },
  methods:{
    exit(){
      axios.get("/api/user/exit").then(res=>{
        if (res.data.code === 0) {
          this.$message({
            type: "success",
            message: res.data.message
          })
        } else {
          this.$message({
            type: "error",
            message: res.data.message
          })
        }
      })
      this.$router.push("/")
    },
    personalData(){
      this.$router.push("/user")
    }
  }
}

</script>


<style scoped>

</style>